<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="600px" ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
    <a-form :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="任务名称">
        <a-input placeholder="请输入任务名称" v-decorator="['taskName']"></a-input>
      </a-form-item>
      <a-form-item label="任务类型">
        <a-select v-decorator="['taskType']" style="width: 276px;margin-right: 15px;" placeholder="请选择任务类型">
          <a-select-option :key="1">
            企业宣传
          </a-select-option>
          <a-select-option :key="2">
            数据处理
          </a-select-option>
          <a-select-option :key="3">
            考勤处理
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="任务次数">
        <a-input placeholder="请输入任务次数" v-decorator="['taskCount']"></a-input>
      </a-form-item>
      <a-form-item label="任务时间">
        <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {
  addTask,
  updateTask
} from "@/api/human/disabled"
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      id: "",
      rangeDate: [], // 日期范围
      taskStartTime: "",
      taskEndTime: "",
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(row) {
      this.visible = true;
      this.id = row === true ? '' : row.id;
      
      if (row == true) {
        this.title = '新增';
        this.rangeDate = [];
        this.taskStartTime = "";
        this.taskEndTime = "";
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
      } else {
        this.title = '修改';
        this.$nextTick(() => {
          let values = this.events_form.getFieldsValue();
          for(var key in row){
            values[key] = row[key]
          }
          this.rangeDate = [row.taskStartTime,row.taskEndTime]
          this.taskStartTime = row.taskStartTime;
          this.taskEndTime = row.taskEndTime;
          this.events_form.setFieldsValue(values);
        })
      }
    },
    // 日期选择
    rangeChange(e) {
      this.taskStartTime = e[0];
      this.taskEndTime = e[1];
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.id) {
            // 修改
            values.id = this.id;
          }
          values.taskStartTime = this.taskStartTime
          values.taskEndTime = this.taskEndTime
          this.submitLoading = true;
          const { code } = this.id ? await updateTask(values): await addTask(values);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$message.success('操作成功');
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
